<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<script type="text/javascript" src="lib/PIE_IE678.js"></script>
<![endif]-->
<link href="css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="lib/icheck/icheck.css" rel="stylesheet" type="text/css" />
<link href="lib/Hui-iconfont/1.0.6/iconfont.css" rel="stylesheet" type="text/css" />
<link href="lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>新增广告位</title>
</head>
<body>

<div class="pd-20">
	<form action="<%=path%>/backstage/t_news_ad-add" method="post" class="form form-horizontal" id="form-t_news-add">
		<input type="hidden" id="id" name="id" value='${t_news.rid}' />
        
		<!--广告图片-->
		<c:if test="${!empty t_news.picname }">
		<div class="row cl">
			<label class="form-label col-2"></label><div class="formControls col-10"><img src="<%=imagePath%>${t_news.picname}" height="50" border="0" /></div> 
		</div>
		</c:if>
		<div class="row cl">
			<label class="form-label col-2">广告图片：</label>
			<div class="formControls col-10">
				<div class="uploader-thum-container">
					<div id="fileList" class="uploader-list"></div>
					<div id="filePicker">选择图片</div>
					<button id="btn-star" type="button" class="btn btn-default btn-uploadstar radius ml-10">开始上传</button>
				</div>
			</div>
		</div>
		
		<input type="hidden" id="picname" name="picname" value="${t_news.picname}" datatype="*" nullmsg="不能为空" />
		<!--/广告图片-->

        <div class="row cl">
			<label class="form-label col-2">描述：</label>
            <div class="formControls col-8">
                <input type="text" class="input-text" value="${t_news.titles}" placeholder="" id="" name="titles" datatype="*" nullmsg="不能为空">
        	</div>
		</div>
        <div class="row cl">
			<label class="form-label col-2">分类：</label>
            <div class="formControls col-2">
            <span class="select-box">
				<select name="ctype" class="select">
					<option value="app" <c:if test="${'app'==t_news.ctype}">selected</c:if> >用户端</option>
					<option value="app_shops" <c:if test="${'app_shops'==t_news.ctype}">selected</c:if> >商家端</option>
				</select>
			</span>	
        	</div>

			<label class="form-label col-2">所属县市：</label>
			<div class="formControls col-2">
				<span class="select-box">
					<select name="city_id" id="cityid" class="select" datatype="n" nullmsg="请选择县市">
						<c:forEach items="${citys}" var="city">
						<option value="${city.id}" <c:if test="${city.id==t_news.city_id}">selected</c:if> >${city.name}</option>
						</c:forEach>
					</select>
				</span>
			</div>

		</div>
        <div class="row cl">
			<label class="form-label col-2">跳转地址：</label>
            <div class="formControls col-4">
                <input type="text" class="input-text" value="${t_news.origin}" placeholder="" id="" name="origin" >
        	</div>
			<label class="form-label col-2">跳转分类：</label>
            <div class="formControls col-2">
            <span class="select-box">
				<select name="ctype_b" class="select">
					<option value="">不跳转</option>
					<option value="1" <c:if test="${'1'==t_news.ctype_b}">selected</c:if> >美食外卖</option>
					<option value="2" <c:if test="${'2'==t_news.ctype_b}">selected</c:if> >新人特权</option>
				</select>
			</span>	
        	</div>
		</div>
		<div class="row cl">
			<label class="form-label col-2">货品编码：</label>
            <div class="formControls col-4">
                <input type="text" class="input-text" value="${t_news.product_id}" placeholder="" id="productid" name="product_id" >
                 <input type="hidden" class="input-text" value="${t_news.goods_id}" placeholder="" id="goodsid" name="goods_id" >
        	</div>
        	<a class="btn btn-primary radius" onclick="sear_goods(this)" name="${t_news.product_id}" href="javascript:;" title="选择货品">选择货品</a>
		</div>
		<div class="row cl"><label class="form-label col-2"></label>(跳转到商品详情，请留空值)</div>
        <div class="row cl">
			<label class="form-label col-2">是否有效：</label>
			<div class="formControls col-3 skin-minimal">
				<div class="radio-box">
				  <input type="radio" name="enable" datatype="*" nullmsg="请选择！" value="0" checked="true" <c:if test='${0==t_news.enable}'>checked="true"</c:if> >
				  <label for="sex-1">否</label>
				</div>
				<div class="radio-box">
				  <input type="radio"  name="enable" datatype="*" nullmsg="请选择！" value="1" <c:if test='${1==t_news.enable}'>checked="true"</c:if> >
				  <label for="sex-2">是</label>
				</div>
        	</div>

		    <label class="form-label col-2">排序：</label>
            <div class="formControls col-2">
                <input type="text" class="input-text" value="${t_news.c_order}" placeholder="" id="" name="c_order" datatype="*" nullmsg="不能为空">
        	</div>
		</div>
  
		<div class="row cl mt-10">
			<div class="col-10 col-offset-2">
				<button onClick="t_news_save_submit();" class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存并提交</button>
				<button onClick="layer_close();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
			</div>
		</div>
	</form>
</div>
</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="lib/layer/2.1/layer.js"></script> 
<script type="text/javascript" src="lib/My97DatePicker/WdatePicker.js"></script> 
<script type="text/javascript" src="lib/icheck/jquery.icheck.min.js"></script> 
<script type="text/javascript" src="lib/Validform/5.3.2/Validform.min.js"></script> 
<script type="text/javascript" src="lib/webuploader/0.1.5/webuploader.min.js"></script> 
<script type="text/javascript" src="lib/ueditor/1.4.3/ueditor.config.js"></script>
<script type="text/javascript" src="lib/ueditor/1.4.3/ueditor.all.min.js"> </script>
<script type="text/javascript" src="lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="js/H-ui.js"></script> 
<script type="text/javascript" src="js/H-ui.admin.js"></script> 
<script type="text/javascript">

function t_news_save_submit(){
	$("#form-t_news-add").Validform({
		tiptype:2,
		ajaxPost:true,
		callback:function(form){
			var index = parent.layer.getFrameIndex(window.name);
			parent.$('.btn-refresh').click();
			parent.layer.close(index);	
		}
	});
}

/*选择货品*/
function sear_goods(obj) {
	//$("#size").val($(obj).attr("name"));
	layer_show('选择货品', '<%=path%>/backstage/sear-act-goods?isone=1&act_type_id=', 600, 500);
}

$(function(){
	$('.skin-minimal input').iCheck({
		checkboxClass: 'icheckbox-blue',
		radioClass: 'iradio-blue',
		increaseArea: '20%'
	});
	
	// 优化retina, 在retina下这个值是2
	ratio = window.devicePixelRatio || 1,

	// 缩略图大小
	thumbnailWidth = 110 * ratio,
	thumbnailHeight = 110 * ratio,

	$list = $("#fileList"),
	$btn = $("#btn-star"),
	state = "pending",
	uploader;

	var uploader = WebUploader.create({
		auto: true,
		swf: 'lib/webuploader/0.1.5/Uploader.swf',
	
		// 文件接收服务端。
		server: '<%=path%>/backstage/t_news_ad-img-upload',
	
		// 选择文件的按钮。可选。
		// 内部根据当前运行是创建，可能是input元素，也可能是flash.
		pick: '#filePicker',
		auto: true,
		// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
		resize: false,
		// 只允许选择图片文件。
		accept: {
			title: 'Images',
			extensions: 'gif,jpg,jpeg,bmp,png',
			mimeTypes: 'image/*'
		}
	});
	uploader.on( 'fileQueued', function( file ) {
		var $li = $(
			'<div id="' + file.id + '" class="item">' +
				'<div class="pic-box"><img></div>'+
				'<div class="info">' + file.name + '</div>' +
				'<p class="state">等待上传...</p>'+
			'</div>'
		),
		$img = $li.find('img');
		$list.append( $li );
	
		// 创建缩略图
		// 如果为非图片文件，可以不用调用此方法。
		// thumbnailWidth x thumbnailHeight 为 100 x 100
		uploader.makeThumb( file, function( error, src ) {
			if ( error ) {
				$img.replaceWith('<span>不能预览</span>');
				return;
			}
	
			$img.attr( 'src', src );
		}, thumbnailWidth, thumbnailHeight );
	});
	// 文件上传过程中创建进度条实时显示。
	uploader.on( 'uploadProgress', function( file, percentage ) {
		var $li = $( '#'+file.id ),
			$percent = $li.find('.progress-box .sr-only');
	
		// 避免重复创建
		if ( !$percent.length ) {
			$percent = $('<div class="progress-box"><span class="progress-bar radius"><span class="sr-only" style="width:0%"></span></span></div>').appendTo( $li ).find('.sr-only');
		}
		$li.find(".state").text("上传中");
		$percent.css( 'width', percentage * 100 + '%' );
	});
	
	// 文件上传成功，给item添加成功class, 用样式标记上传成功。
	uploader.on( 'uploadSuccess', function( file, response ) {
		$( '#'+file.id ).addClass('upload-state-success').find(".state").text("已上传");
		$("#picname").val(response.datas);
	});
	
	// 文件上传失败，显示上传出错。
	uploader.on( 'uploadError', function( file ) {
		$( '#'+file.id ).addClass('upload-state-error').find(".state").text("上传出错");
	});
	
	// 完成上传完了，成功或者失败，先删除进度条。
	uploader.on( 'uploadComplete', function( file ) {
		$( '#'+file.id ).find('.progress-box').fadeOut();
	});
	uploader.on('all', function (type) {
        if (type === 'startUpload') {
            state = 'uploading';
        } else if (type === 'stopUpload') {
            state = 'paused';
        } else if (type === 'uploadFinished') {
            state = 'done';
        }

        if (state === 'uploading') {
            $btn.text('暂停上传');
        } else {
            $btn.text('开始上传');
        }
    });

    $btn.on('click', function () {
        if (state === 'uploading') {
            uploader.stop();
        } else {
            uploader.upload();
        }
    });

});

</script>
</body>
</html>

